import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, BoxGeometry, Line, Vector3,
  MeshLambertMaterial, Mesh, WebGLRenderer, DirectionalLight,
  MeshBasicMaterial
} from 'three';

const drawAxes = scene => {
  const xGeo = new BoxGeometry();
  const xGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(6, 0, 0)
  ];
  xGeo.setFromPoints(xGeoPoints);
  const xMat = new MeshBasicMaterial({
    color: 0xff0000
  });
  const xAxis = new Line(xGeo, xMat);
  scene.add(xAxis);

  const yGeo = new BoxGeometry();
  const yGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(0, 6, 0)
  ];
  yGeo.setFromPoints(yGeoPoints);
  const yMat = new MeshBasicMaterial({
    color: 0x00ff00
  });
  const yAxis = new Line(yGeo, yMat);
  scene.add(yAxis);

  const zGeo = new BoxGeometry();
  const zGeoPoints = [
    new Vector3(0, 0, 0),
    new Vector3(0, 0, 6)
  ];
  zGeo.setFromPoints(zGeoPoints);
  const zMat = new MeshBasicMaterial({
    color: 0x00ccff
  });
  const zAxis = new Line(zGeo, zMat);
  scene.add(zAxis);

};

const scene = new Scene();
drawAxes(scene);

const camera = new OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
camera.position.set(5, 5, 20);
camera.lookAt(0, 0, 0);

const geometry = new BoxGeometry(1, 2, 3);

const light = new DirectionalLight(0xffffff);
light.position.set(20, 10, 5);
scene.add(light);

const material = new MeshLambertMaterial({
  color: 0xffff00
});

const mesh = new Mesh(geometry, material);
scene.add(mesh);

let renderer = null;

class Index extends PureComponent {

  componentDidMount() {

    renderer = new WebGLRenderer({
      canvas: document.getElementById('mainCanvas')
    });

    renderer.render(scene, camera);

  }

  render() {

    return (
      <div>
        <div>
          <button
            style={{
              marginRight: '10px'
            }}
            onClick={
              () => {
                mesh.position.set(0, 0, 0);
                mesh.scale.set(1, 1, 1);
                mesh.rotation.set(0, 0, 0);
                renderer.render(scene, camera);
              }
            }
          >重置</button>
          <button
            style={{
              marginRight: '10px'
            }}
            onClick={
              () => {
                mesh.position.set(1.5, -0.5, 0);
                renderer.render(scene, camera);
              }
            }
          >位移</button>
          <button
            style={{
              marginRight: '10px'
            }}
            onClick={
              () => {
                mesh.scale.set(0.5, 0.5, 0.5);
                renderer.render(scene, camera);
              }
            }
          >缩放</button>
          <button
            onClick={
              () => {
                mesh.rotation.set(1.5, -0.5, 0);
                renderer.render(scene, camera);
              }
            }
          >旋转</button>
        </div>
        <canvas
          id="mainCanvas"
          width="400"
          height="300"
        />
      </div>
    );
  }
}

export default Index;